<template>
  <common-dialog ref="dialog" width="1000px" title="工作流详情" :inDialog="inDialog" :data="data" @closed="onClosed">
    <common-form ref="form" text-mode label-width="100px">
      <el-divider>工作流信息</el-divider>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="ID">{{ data.id }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作编号">{{ data.no }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="24">
          <el-form-item label="工作名称">
            <el-tag v-if="data.isDeleted" type="danger" style="margin-right:5px">已删</el-tag>{{ data.name }}
          </el-form-item>
        </el-col>

      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="流程名称">{{ data.workflowName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="no-border" label="状态">
            <el-tag :type="getWorkflowStatusType(data.status)"> {{ data.statusName }} </el-tag>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="申请人">{{ data.applicationUserName }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="申请时间">{{ data.applicationTime }}</el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="创建时间">{{ data.creationTime }}</el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="最后更新时间">{{ data.lastModificationTime }}</el-form-item>
        </el-col>
      </el-row>
    </common-form>
    <el-divider>工作流程信息</el-divider>
    <el-timeline>
      <el-timeline-item v-for="(task, index) in data.tasks" :key="index" :type="getTaskStatusType(task.status)"
        :timestamp="task.creationTime">
        <span class="c-title-1">{{ task.name }}</span> <span class="c-text-grey c-text-small">[{{ task.statusName }}]</span>

        <el-popover width="400" trigger="click" :content="task.extraProperties">
          <span v-show="task.extraProperties" class="c-text-grey-1 c-mg-l-5p" style="cursor: pointer"
            slot="reference">[查看扩展属性]</span>
        </el-popover>
        <div class="c-pd-5p c-border">
          <div class="c-text-grey" v-show="task.processes && task.processes.length > 0">
            <div class="c-text-bold">处理人：</div>
            <div v-for="p in  task.processes" :key="p.id">
              <span @click="showUserDetail(p.processUserId)" style="cursor: pointer">{{ p.processUserName }}</span>
              <el-tag :type="task.status == 1 ? 'danger' : 'success'">{{ p.statusName }}</el-tag>
              <el-tag type="info">{{ p.startedTime }} 至 {{ p.finishedTime }}</el-tag>
              <el-popover width="400" trigger="click" :content="p.formData">
                <span v-show="p.formData" class="c-text-grey-1 c-mg-l-5p" style="cursor: pointer"
                  slot="reference">[查看表单数据]</span>
              </el-popover>
              <el-popover width="400" trigger="click" :content="p.extensionData">
                <span v-show="p.extensionData" class="c-text-grey-1 c-mg-l-5p" style="cursor: pointer"
                  slot="reference">[查看扩展数据]</span>
              </el-popover>
            </div>
          </div>
          <div class="c-text-grey" v-show="task.candidates && task.candidates.length > 0">
            <div class="c-text-bold">待办人：</div>
            <span v-for="c in  task.candidates" :key="c.id" @click="showUserDetail(c.candidateUserId)" style="cursor: pointer">
              {{ c.candidateUserName }}
            </span>
          </div>
        </div>
      </el-timeline-item>
    </el-timeline>
    <common-dialog width="400px" title="退回节点" ref="returnTaskDialog" in-dialog>
      <common-form ref="returnTaskForm" :rules="returnTaskRules" :data="returnTaskData">
        <el-form-item label="退回节点" prop="returnTaskId">
          <el-select v-model="returnTaskData.returnTaskId">
            <el-option v-for="t in data.tasks" :key="t.id" :label="t.name" :value="t.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="updateTaskDefinition">
          <el-checkbox v-model="returnTaskData.updateTaskDefinition">更新节点定义</el-checkbox>
        </el-form-item>
      </common-form>
      <template slot="footer">
        <el-button type="primary" @click="returnTask">确定</el-button>
      </template>
    </common-dialog>
    <template slot="footer">
      <el-button @click="getData(data.id)">刷新</el-button>
      <el-button @click="syncToEs" :loading="syncEsLoading" type="primary">同步到ES</el-button>
      <el-button @click="openReturnTaskDialog" :loading="returnTaskLoading" type="primary">退回节点</el-button>
    </template>
    <user-detail-dialog in-dialog ref="userDetailDialog" />
  </common-dialog>
</template>
<script>
import commonDialog from "@/components/common/dialog";
import commonForm from "@/components/common/form";
import userDetailDialog from "@/components/sso/user/detailDialog";
import api from "@/api/wf/workflow";

export default {
  props: {
    inDialog: {
      type: Boolean,
      default: false
    },
  },
  components: {
    commonDialog,
    commonForm,
    userDetailDialog
  },
  data() {
    return {
      syncEsLoading: false,
      syncIcpLoading: false,
      resetNameLoading: false,
      repairLoading: false,
      returnTaskLoading: false,
      data: {
        id: "",
        name: "",
        mergerId: "",
        code: "",
        enName: "",
        zhName: ""
      },
      api,
      returnTaskData: {
        returnTaskId: "",
        updateTaskDefinition: false
      },
      returnTaskRules: {
        returnTaskId: [{ required: true, message: "请选择退回的节点" }],
      }
    };
  },
  created() {

  },
  methods: {
    openDetail(id) {
      this.$refs.dialog.open().then(() => {
        this.getData(id);
      });
    },
    getData(id) {
      this.$refs.dialog.loading(true);
      api.getDetail(id).then((res) => {
        this.$refs.dialog.loading(false);
        if (res.code != 0) {
          return;
        }
        this.data = res.data;
      });
    },
    onClosed() {
      this.$refs.form.reset();
      this.tabName = "location";
    },
    getTaskStatusType(status) {
      let text = "";
      switch (status) {
        case 0:
          text = "primary"
          break;
        case 2:
          text = "success";
          break;
        case 2:
          text = "success";
          break;
        case 3:
          text = "danger";
          break;
      }
      return text;
    },
    getWorkflowStatusType(status) {
      var text = "";
      switch (status) {
        case 0:
          text = "info";
          break;
        case 1:
          text = "";
          break;
        case 2:
          //处理中
          text = "primary";
          break;
        case 3:
          //驳回
          text = "danger";
          break;
        case 4:
          //办结
          text = "success";
          break;
        case 5:
          text = "warning";
          break;
        case 6:
          text = "info";
          break;
      }
      return text;
    },
    syncToEs() {
      this.syncEsLoading = true;
      api.syncToEs({ ids: [this.data.id] }).then(() => {
        this.syncEsLoading = false;
      });
    },
    openReturnTaskDialog() {
      this.$refs.returnTaskDialog.open().then(() => {
        this.$refs.returnTaskForm.reset();
      });
    },
    returnTask(taskId) {
      this.$refs.returnTaskForm.validate().then(valid => {
        console.log(valid)
        if (valid) {
          // this.returnTaskLoading = true;
          this.$refs.returnTaskDialog.loading(true);
          api.returnTask({ returnTaskId: this.returnTaskData.returnTaskId, updateTaskDefinition: this.returnTaskData.updateTaskDefinition }).then(() => {
            this.$refs.returnTaskDialog.loading(false);
            this.$refs.returnTaskDialog.close();
          })
        }
      })
    },
    showUserDetail(userId) {
      this.$refs.userDetailDialog.openDetail(userId);
    }
  },
};
</script>